<template>
  <div class="">
    <div class="cardDiv4" >
      <div class="infoPublic">
        <div class="rewards-punishment-div">
          <div class="infoTop">
            <div class="infoPublicImg"><img style="width:19px;height:21px;"  src="@/assets/icon_2.png"/></div>
            <div class="infoPublicText">不良行为</div>
            <div class="more" @click="toBadBehavior">更多&nbsp;></div>
          </div>
          <div style="height:2px;width:100%;border-top:1px  solid #ccc;float:left;margin-top:10px;margin-bottom: 3.1px;"></div>
          <div class="rewards-punishment-content-div">
            <template v-for="(item,index) in blxwListData">
              <!-- <div v-if="index===0" :key="index" :value="index" @click="onBadBehaviorDetail(item,index)" >
                 <div class="item-first">
                    <img class="item-img-first"  width="80" height="60" v-if="item.contentImg!=undefined && JSON.parse(item.contentImg)[0]!=undefined" :src="imaPath+JSON.parse(item.contentImg)[0].path " />
                    <img class="item-img-first"  width="80" height="60" v-else  style="background:#ccc"/>

                    <div class="item-content-first">
                      <div class="item-content-text-first-div" v-if="!ms_ie"><span class="item-content-text-first" :title="item.contentTitle">{{item.contentTitle}}</span></div>
                      <div class="item-content-text-first-div" v-else><span class="item-content-text-first" :title="item.contentTitle">{{item.contentTitle.length>30?item.contentTitle.slice(0,29)+'...':item.contentTitle}}</span></div>
                      <div class="item-content-time-first">[{{ moment(item.createDate).format('YYYY年MM月DD日') }}]</div> 
                    </div>
                  </div>
                  <div style="height:1px;width:100%;border-top:1px dashed #ccc;float:left;margin-top:5px"></div>
              </div> -->
              <div  :key="index" @click="onBadBehaviorDetail(item,index)"> 
                  
                  <div class="item-first">
                    <div class="item-content-text-other-div">
                      <span style="color: #999999; font-weight: 600;">•</span>
                      <span class="item-content-text-other" :title="item.contentTitle">{{item.contentTitle}}</span>
                    </div>
                    <div class="item-content-time-other">
                       <span  v-if="item.contentDatetime!=='' && item.contentDatetime!==null">{{ moment(item.contentDatetime).format('YYYY/MM/DD') }}</span>
                      </div>
                  </div>
                  <div style="height:0.1px;width:100%;border-top:0.1px dashed #ccc;float:left;"></div>
              </div>
            </template>
            <a-empty :image="simpleImage" v-if="blxwListData.length==0" />
          </div>
        </div>
        <div class="proj-basic-info-div">
          <div class="infoTop">
            <div class="infoPublicImg"><img style="width:20px;height:21px;"  src="@/assets/icon_3.png"/></div>
            <div class="infoPublicText">项目信息</div>
            <div class="more" @click="toProPublicInfo">更多&nbsp;> </div>
          </div>
          <div style="height:2px;width:100%;border-top:1px solid #ccc;float:left;margin-top:10px;"></div>
          <!-- 
           -->
           <div class="home-proj-div">
             <a-menu
                theme="dark"
                mode="horizontal"
                :defaultSelectedKeys="[mouseoverSelect]"
                :style="{ lineHeight: '30px',marginTop:'27px',background: '#fff' }"
                @click="onProjMenuClick" 
                :selectedKeys="[mouseoverSelect]"
              >
                <template v-for="item in projMenuData">
                  <a-menu-item :key="item.key" @mouseover="onMouseoverMenu(item.key)" style="margin-right:10px;"> {{ item.name }}</a-menu-item>
                </template>
              </a-menu>
           </div>
           <div class=base-info-content-div>
             <template v-for="(item,index) in xmInfoListData">
               <!-- <div :key="index" :value="index" class="base-info-content-text-div" :title="item.xmName+'-'+item.address" @click="toProjDetail(item)" v-if="!ms_ie">
                 <span class="base-info-item-one" >{{item.xmName}}</span> - <span class="base-info-item-two">{{item.address}}</span>
               </div>
                <div :key="index" :value="index" class="base-info-content-text-div" :title="item.xmName+'-'+item.address" @click="toProjDetail(item)" v-else >
                 <span class="base-info-item-one" >{{item.xmName.length>50?item.xmName.slice(0,49):item.xmName}}</span> - <span class="base-info-item-two">{{item.xmName.length>42?'':item.address}}</span>
                 <span>{{(item.xmName.length+item.address.length)>51?'...':''}}</span>
               </div> -->
               <div  :key="index" @click="toProjDetail(item,index)"> 
                  
                  <div class="item-first">
                    <div class="item-content-text-other-div">
                      <span style="color: #999999; font-weight: 600;">•</span>
                      <span class="item-content-text-other" :title="item.xmName">{{item.xmName}}</span>
                    </div>
                    <div class="item-content-time-other">
                      <span  v-if="item.createDate!=='' && item.createDate!==null">{{ moment(item.createDate).format('YYYY/MM/DD') }}</span> 
                      </div>
                  </div>
                  <div style="height:0.1px;width:100%;border-top:0.1px dashed #ccc;float:left;"></div>
              </div>
           
             </template>
             <a-empty :image="simpleImage" v-if="xmInfoListData.length==0" />
           </div>
           
        </div>
      </div>
      <div class="statisticalData">
   
         <img class="img_report" src="@/assets/report.png" @click="toNewReport"/>
         <div>
            <img class="report-img-icon-contact" src="@/assets/icon_contact.png"/>
            <span style="color:#337BD7;font-size:16px;margin-left:10px;font-family: Microsoft YaHei;font-weight: bold;">联系方式</span>
         </div>
          <div style="height:2px;width:100%;border-top:1px solid #ccc;float:left;margin-top:5px;"></div>

              <div class="report-div">
                <img class="report-img-icon" src="@/assets/icon_email.png"/>
                <div class="report-text">
                  <div class="div1">信箱：</div>
                  <div class="div2">{{lxfsData.mail?lxfsData.mail:''}} </div>
                </div>
              </div>
           
            <div class="report-div">
                <img class="report-img-icon" src="@/assets/icon_phone.png"/>
                <div class="report-text">
                  <div class="div1">电话：</div>
                  <div class="div2">{{lxfsData.telephone?lxfsData.telephone:''}} </div>
                </div>
            </div> 
            <div class="report-btn">
              <a-button type="primary" class="report-cmmmit-btn" @click="toNodeReport"> 注意事项 </a-button>
            </div>

      </div>
    
    
    
    </div>  

  
  
  </div>
  
</template>

<script>
// import moment from "moment";
import { Empty } from 'ant-design-vue';
import api from '@/api/index'
  export default {
    name: "item4",
    beforeCreate() {
      this.simpleImage = Empty.PRESENTED_IMAGE_SIMPLE;
    },
    data() {
      return {
        mouseoverSelect:1,
        // ms_ie:false,
        imaPath:this.$globalConfig.adressPath,
        blxwListData:[],
        blxwPageFilter: {
          contentCategoryId:"154",
          pageNo:1,
          pageSize:6 ,
        },
        xmInfoListData:[
            // {
            //   id:1,
            //   xmName: '2016年国家水土保持重点建设工程东方市大广坝库区老报英村小流域综合治理项目',
            //   address: '东方市江边乡',
            // },
            // {
            //   id:2,
            //   xmName: '2016年综合治理项目大广坝库区老报英村小流域综合治理项目大广坝库区老报英村小流域综合治理项目',
            //   address: '东方市江边乡',
            // },
            // {
            //   id:3,
            //   xmName: '2016年国家水土保持重点建设工程东方市xx县大广坝库区老报英村小流域综合治理项目项目',
            //   address: '东方市xx县江边乡',
            // },
            // {
            //   id:4,
            //   xmName: '2016年国家水土保持重点建设工程东方市大广坝库区老报英建设工程东方市大广坝库区老报英村小流域综合治理项目',
            //   address: '东方市江边乡',
            // },
            // {
            //   id:5,
            //   xmName: '2016年国家水土保持重点建设工程东方市大广坝库区老报英建设工程东方市大广坝库区老报英村小流域综合治理项目',
            //   address: '东方市江边乡',
            // },
          ],
        projMenuData:[
            {
              key:1,
              name:'招标信息'
            },{
              key:2,
              name:'中标公示'
            }
          ],
        bidInfoListData:[],
        winBidListData: [],
        bidInfoPageFilter: {
          pageNo: 1,
          pageSize: 5,
        },
        lxfsData:{},
      }
    },
    created(){
      // var ua = window.navigator.userAgent;
      // var old_ie = ua.indexOf('MSIE ');
      // var new_ie = ua.indexOf('Trident/');
      // if ((old_ie > -1) || (new_ie > -1)) {
      //     this.ms_ie = true;
      // }
      // if ( this.ms_ie ) {
      //   document.documentElement.className += " ie";
      // }
      this.get_blxw_list();
      this.get_bidinfo_list();
      this.get_winBid_list();
      this.get_lxfs();
    },
    methods: {
      onTabChange(key, type) {
        this[type] = key;
      },
      toNodeReport(data) {
          this.$router.push({
              name:'nodeReport',
              query:{
                type:'',
                breadcrumbName:'举报投诉'

             }
        });
      },
       onMouseoverMenu(key){
         this.mouseoverSelect=key;
         this.onProjMenuClick({key});
          
      },
      onProjMenuClick({ key }) {
         this.mouseoverSelect=key;
        //  this.setSjIsShow(key);
        if(key==1){
          this.xmInfoListData = this.bidInfoListData;
        }else if(key==2){
            this.xmInfoListData = this.winBidListData;
         }
          
      },
    
      toBadBehavior(){
        this.$router.push({
          name:"badBehaviorPage",
        
        });
      },
      toProPublicInfo(){
         this.$router.push({
          name:"projPublicInfoPage",
        
        });
      },
      toProjDetail(record){
        let name = '';
         if(this.mouseoverSelect==1){
            name = 'bidInfoDetail';
         }else{
           name = 'winBidDetail';
         }
          this.$router.push({
              name:name,
              query:{
                type:'detail',
                id:record.id,
                breadcrumbName:'项目信息'

             }
            });
          
      },
      toNewReport(){
         this.$router.push({
              name:'newReport',
              query:{
                type:'add',
                breadcrumbName:'举报投诉'

             }
        });
      },
      onBadBehaviorDetail(item,index){
        this.$router.push({
          name:"newsDetail",
          query:{
            type:'detail',
            id:item.id,
            breadcrumbName:'不良行为',
            routerLikeTo:'/center/badBehaviorPage'
          }
        });
      },

      get_blxw_list() {
         api.get_news_list(this.blxwPageFilter).then(res => {
            this.blxwListData = res.rows;
          })
          .catch(err => {
          });
      },
      get_winBid_list() {
         api.get_winbid_list(this.bidInfoPageFilter).then(res => {
            this.winBidListData = res.rows;
          })
          .catch(err => {
          });
      },
      get_bidinfo_list() {
         api.get_bidinfo_list(this.bidInfoPageFilter).then(res => {
            this.bidInfoListData = res.rows;
            if(res.rows.length>0){
              for(let i=0;i<res.rows.length;i++){
                this.bidInfoListData[i].xmName = res.rows[i].nameXm
              }
            }
            
            this.xmInfoListData = this.bidInfoListData
          })
          .catch(err => {
          });
      },
      get_lxfs() {
        api.get_lxfs().then(res => {
            if(res!=null){
              this.lxfsData = res;
            }
          })
          .catch(err => {
          });
      },
    },
  };
</script>
<style lang="less">

.tabview4{
  width: 65%;
  position: absolute;
  /* z-index: 99999; */
  height: 280px;
  margin-top: 855px;
  left: 17.5%;
 
}

.cardDiv4{
  height: 330px;
  background: #fff;
  margin-top: 37px;
}
.item-first{
  display: inline-flex;
  width: 100%;
}
.item-first:hover{
  cursor: pointer;
  .item-content-text-other,.item-content-time-other,.item-content-text-first,.item-content-time-first{
    color: #005AB5;
    font-weight: 600;
  }
}

.item-content-first{
  margin-left: 10px;
  align-self: center;
  width:68%
}
// .item-content-text-first-div{
//     width: 68%;
//     height: 20px;
//     line-height: 20px;
//     /* display: block; */
//     text-overflow: ellipsis;  /*超出内容用省略号*/
//     overflow: hidden; /*内容超出后隐藏*/
//     white-space: nowrap; /*文本不进行换行*/

//   }
.item-content-text-first-div{
  overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;//（行数）
    -webkit-box-orient: vertical;
    margin-top: -5px;
    
}
.item-content-text-first{
  height: 20px;
  font-size: 13px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #343434;
  line-height: 20px;
}

.item-content-time-first{
  height: 20px;
  font-size: 11px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  line-height: 20px;
  margin-top: 5px;
}

.item-content-text-other-div{
    width: 78%;
    height: 47px;
    line-height: 47px;
    /* display: block; */
    text-overflow: ellipsis;  /*超出内容用省略号*/
    overflow: hidden; /*内容超出后隐藏*/
    white-space: nowrap; /*文本不进行换行*/

  }
.item-content-text-other{
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #343434;
  padding-left: 5px;
}
.item-content-time-other{
  width: 75px;
  height: 47px;
  line-height: 47px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #666666;
  text-align: right;
  padding-top: 2px;
}

.base-info-content-div{
  padding-top:0;
  margin-top: 6px;
}
.base-info-content-text-div{
  padding-top: 5px;
  overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;//（行数）
    -webkit-box-orient: vertical;
    // white-space: nowrap; /*文本不进行换行*/
    
}
.ie_base-info-content-text-div{
    padding-top: 4px;
    height: 3.3em;
    line-height: 1.6;
    overflow: hidden;
    position: relative;
}
.ie_base-info-content-text-div::after{
   content: '...';
   text-align: right;
   position: absolute;
   bottom: 0;
   right: 0;
   width: 10%;
   height: 1.4em;
   background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
}

.base-info-content-text-div:hover,.ie_base-info-content-text-div:hover{
   cursor: pointer;
   .base-info-item-one,.base-info-item-two{
     color: #005AB5;
     font-weight: 600;
   }
}
.base-info-item-one{
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #333333;
}
.base-info-item-two{
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: Bold;
  color: #0068B8;
}

.img_report{
  width:100%;
  max-width:100%;
  height: 140px;
  margin-bottom: 8px;
}
.img_report{
  cursor: pointer;
}
.report-div{
  display: flex;
  margin-left: 9px;
  margin-top: 12.2px;
  .report-img-icon{
    margin-top: 6px;
    width: 27px;
    height: 27px;
  }
  .report-text{
    margin-left: 5px;
    .div1{
        color:#347CD8;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
    }
    .div2{
      font-size: 14px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #4D4D4D;
    }
  }
  
}
.report-img-icon-contact{
  width: 18px;
    height: 21px;
}
.report-cmmmit-btn{
  width: 100%;
  height: 40px;
  // background-image: url(../../../../assets/btn-blue.png);
  background: #2666C0;
  border: 0px;
  border-radius: 0px;
  margin-top: 9px;
  font-size: 18px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #FFFFFF;
}

 .report-btn > .ant-btn-primary:focus {
    color: #fff;
    background-image: url(../../../../assets/btn-blue.png);
    border: 0px;
}

.rewards-punishment-div{
  float: left;
  width: 49%;
  padding-right: 10px;
}
.proj-basic-info-div{
  float: left;
  width: 51%;
  padding-left: 11px;
}

.top-text-one{
  width: 40%;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #337BD7;
  margin-left: 8px;
  }
.top-text-two{
    width: 60%;
    text-align: left;
    font-size: 11px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #666666;
  }
  .home-proj-btn-one{
    height: 30px;
    background: #337BD7;
    
  }
  .home-proj-div{
   
    .ant-menu-dark.ant-menu-horizontal > .ant-menu-item, .ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu {
        top: 0;
        margin-top: 0;
        border-color: #001529;
        border-bottom: 0;
        background: #F5F5F5;
        color: #333333;
    }
     .ant-menu.ant-menu-dark .ant-menu-item-selected, .ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
    /* background-color: #1890ff; */
    background: #337BD7;
    color: #FFFFFF;
    }
  }
</style>